<template>
	<div id="reception">
		<lead /> 
		<main id="main" >
			<router-view class="fade-router"></router-view>
		</main>
		<foote />

		<div id="backtop" @click='returnTop'>
		    <i class="el-icon-caret-top"></i>
		</div>
	</div>
</template>

<script>
	import lead from './header.vue';
	import foote from './footer';
	export default{
		data(){
			return{
				timer: null,
				bSys: true,
				loginTimer: null
			}
		},
		components: {
			lead,foote,
		},
		mounted() {
			/*30分钟向服务器查询用户登录情况*/
			clearInterval(this.loginTimer);
			this.loginTimer = setInterval(()=>{
			    this.queryLogin()
			}, 1800000);


			this.getOrgLevel2()
			this.getSubject()
			
		    // 当网页向下滑动 20px 出现"返回顶部" 按钮
			
			const better_scroll = this.throttle(() => this.scrollFunction(), 1000)
		    document.addEventListener('scroll',  better_scroll)

		},
		methods: {
			queryLogin(){
			     let success = res => { };
			     this.$ajax({
			         url: "api/login/login",
			         method: "get",
			         params: {},
			         func: {success: success }
			     });
			},
			//获取学段
			getOrgLevel2() {
			    let success = (res => {
			       var data = res.data;
			       this.$g.orgLevel2 = data;
			    })

			    let params ={
			        level: 2,
			        // pid: null,
			        direction: 'balance',
			    }

			    console.log(this.$store.state.isCheckLevel, this.$store.getters.isCheckLevel);
			    if (this.$store.state.isCheckLevel) {
			        this.$ajax.get('api/newlevel/platform_org', { params, func: { success: success } })
			    } else {
			        this.$ajax.get('api/org/org', { params, func: { success: success } })
			    }
			},

			/**
			 * 获取学科数据
			 * @DateTime 2020-03-06T11:36:25+0800
			 * @return   {[type]}                 [description]
			 */
			getSubject() {
			    let success = (res => {
			        var data = res.data;
			        data.unshift({ id: 0, name: '全部学科' })
			        this.$g.subjectList = data;
			      
			    })

			    let params = {
			        status: 1,
			        type: 1
			    }

			    if (this.$store.state.isCheckLevel) {
			        this.$ajax.get('api/newlevel/platform_subject', { params: params, func: { success: success } })
			    } else {
			        this.$ajax.get('api/cate/subject', { params: params, func: { success: success } })
			    }
			},
			throttle(fn, delay) {
				// last为上一次触发回调的时间, timer是定时器
				let last = 0, timer = null
				// 将throttle处理结果当作函数返回
				
				return function () { 
					// 保留调用时的this上下文
					let context = this
					// 保留调用时传入的参数
					let args = arguments
					// 记录本次触发回调的时间
					let now = +new Date()
					
					// 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
					if (now - last < delay) {
					// 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器
					clearTimeout(timer)
					timer = setTimeout(function () {
						last = now
						fn.apply(context, args)
						}, delay)
					} else {
						// 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应
						last = now
						fn.apply(context, args)
					}
				}
			},
			scrollFunction() {
			    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
			        document.getElementById("backtop").style.visibility = "visible";
			    } else {
			        document.getElementById("backtop").style.visibility = "hidden";
			    }
			},

			// 点击按钮，返回顶部
			returnTop() {
			    this.timer = setInterval(() => {
			        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //获取滚动条距离顶部高度
			        var iSpeed = Math.floor((0 - scrollTop) / 9); //Math.floor()向下取整   (0-scrollTop)表示：获取滚动条距离顶部高度的负值

			        this.bSys = true; //意味着是系统在滚动，而不是用户
			        document.documentElement.scrollTop = scrollTop + iSpeed; //设置滚动条距离顶部位置

			        //当滚动条到达顶部，关闭定时器
			        if (scrollTop == 0) {
			            clearInterval(this.timer);
			        }
			    }, 30);
			},
		}
	}
</script>

<style lang="scss">

	/*base code*/
	.fade-router {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: all;
		animation-fill-mode: all;
		-webkit-animation-name: fade-router;
		animation-name: fade-router
	}


	@keyframes fade-router {
		0% {
			opacity: 0;
			visibility: hidden;
		}
		100% {
			opacity: 1;
			visibility: visible;
		}
	}


	   @import  '../../assets/scss/personal.scss'
</style>

